<template>
  <div>
    <el-row :gutter="10">
      <el-card :body-style="{ padding: '0px' }">
      <el-col :span="24">
        <p style="font-size: 18px;">
          <span style="font-size: 14px;font-weight: bold">{{this.list.sname}}</span>
        </p>
      </el-col>
      </el-card>
      <div style="color: #000000; padding-left:5px ">
        <p style="font-size: 20px">
          <span v-if="!this.$route.query.f">查看CRF模板</span>
          <span v-else-if="this.$route.query.f === '0'">查看受试者CRF详情</span>
          <span v-else>编辑受试者CRF详情</span>
          <span style="margin-left:10%;font-size: 12px;color: #00afff">
            <span>受试者医院：{{inform.hospName}}</span>
            <span style="margin-left: 20px">受试者科室：{{inform.department}}</span>
            <span style="margin-left: 20px">受试者住院号：{{inform.hospitalizationNumber}}</span>
            <span style="margin-left: 20px">受试者病区：{{ inform.ward }}</span>
            <span style="margin-left: 20px">受试者床号：{{inform.badNumber}}</span>
          </span>
        </p>
      </div>
      <!--TAB栏-->
      <el-card :body-style="{ padding: '0px' }">
      <el-col>
        <el-tabs v-model="surgeryDate" @tab-click="handleClick">
          <el-tab-pane label="术前筛选期（V0）" name="v0">
            <Tab1/>
          </el-tab-pane>
          <el-tab-pane label="手术当天(V1)" name="v1">
            <Tab2/>
          </el-tab-pane>
          <el-tab-pane label="术后第一天(V2)" name="v2">
            <Tab22/>
          </el-tab-pane>
          <el-tab-pane label="术后第二天(V3)" name="v3">
            <Tab23/>
          </el-tab-pane>
          <el-tab-pane label="术后第三天(V4)" name="v4">
            <Tab3/>
          </el-tab-pane>
          <el-tab-pane label="研究结束表" name="studyEnd">
            <Tab4/>
          </el-tab-pane>

        </el-tabs>
      </el-col>
      </el-card>

    </el-row>
  </div>
</template>
<script>
import {getlistById} from "@/api/system/research";
import {getById,listTester} from "@/api/tester/tester";
import Tab1 from './zero.vue';  // 导入各个 tab 对应的组件
import Tab2 from './one.vue';
import Tab22 from './Two.vue'
import Tab23 from './Three.vue'
import Tab3 from './Four';
import Tab4 from './yanjiuResult';


export default {
  components: {
    Tab1,
    Tab2,
    Tab22,
    Tab23,
    Tab3,
    Tab4,
  },
  props: [],
  data() {
    return {
      currentTab: 'v1',
      surgeryDate: 'v0',
      list:{
        sname: ''
      },
      inform:{

      }
    }
  },
  computed: {},
  watch: {},
  created() {
    if(this.$route.query.id){
      getlistById(this.$route.query.sid).then(res=>{
        this.list = res
      })
      getById(this.$route.query.id).then(res=>{
        this.inform = res
        console.log(this.inform)
      })
    }

  },
  mounted() {
  },
  methods: {
    // tabs标签页切换事件
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {

      } else if (tab.index == 1) {

      } else {

      }

    }
  }
}

</script>
<style>
body {
  padding-left: 18px;
  padding-right: 18px;
}

</style>
